<template>
  <div class="read">

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="###"><b>BILL</b> 财务管理 </a>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <router-link to="/">
                  <a class="nav-link" href="###">录入（主页）</a>
              </router-link>
            </li>

            <li class="nav-item">
              <router-link to="/read">
                  <a class="nav-link" href="###">查看</a>
              </router-link>
            </li>

            <li class="nav-item">
              <router-link to="/manage">
                  <a class="nav-link active" href="###">管理</a>
              </router-link>
            </li>
          </ul>

          <form class="d-flex">
            <input class="form-control me-2" type="search" placeholder="搜索" aria-label="Search" v-model="keyword" v-on:input="update" @input.enter="search">
            <button class="btn btn-outline-primary iconfont" @click="search" type="button">&#xe63a;</button>
          </form>
          
        
        </div>
      </div>
    </nav>

    <div class="main">
        <ul>
            <li>
              <div class="small">名称</div>
              <div>日期</div>
              <div class="small">价格</div>
              <div class="small">数量</div>
              <div class="small">费用</div>
              <div>备注</div>
            </li>

            <li class="bills" v-for="(item, ind) in list" :key="item" @mouseenter="showMore(ind)" @mouseleave="hideShow(ind)" v-show="showlist[ind]">   
              <div class="small">{{item.name}}</div>
              <div>{{item.data}}</div>
              <div class="small">{{item.price}}</div>
              <div class="small">{{item.number}}</div>
              <div class="small" :class="{'act': !item.type,'unact': item.type}">{{item.price * item.number}}</div>
              <div>{{item.remarks}}</div>
              <span class="iconfont" v-show="shows[ind]">
                <a href="###" title="编辑" @click="mod(ind)">&#xe654;</a>
                <a href="###" title="删除" @click="del(ind)">&#xe653;</a>
              </span>
            </li>

            <p>{{mess}} <router-link to="/login" v-show="login">登录</router-link></p>
        </ul>
    </div>

    <div class="mod" v-show="showbtn">
      <h4>修改</h4>
      <p><b>类型： </b><input type="radio" name="sort" v-model="type" value="0">支出
                      <input type="radio" name="sort" v-model="type" value="1">收入</p>
      <p>名称： <input type="text" name="name" id="name" v-model="name"></p>
      <p>价格： <input type="number" name="price" id="price" v-model="price"></p>
      <p>数量： <input type="number" name="number" id="number" v-model="number"></p>
      <p>备注： <input type="text" name="remarks" id="remarks" v-model="remarks"></p>
      <button class="btn btn-secondary" @click="delay">取消</button>
      <button class="btn btn-primary" @click="sure">确认</button>
    </div>
    
</div>
</template>

<script lang="ts">
import qs from 'qs'
import axios from 'axios'
import {useStore} from 'vuex'
import { defineComponent, ref, } from 'vue';

export default defineComponent({
    name: 'read',
    components: {

    },
    setup() {
      const mess = ref()
      const store = useStore()
      const login = ref(false)

      const list:any = ref([])

      // const mess = ref()
      axios.post(`/api/zhangdanList`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((res) => {

        if (res.status === 200) {
          list.value = res.data
          console.log(list.value)

          if(list.value == "") {
            mess.value = "内容为空"
            if(!store.state.login) {
              mess.value = '请先'
              login.value = true
            }
          } else {
            mess.value = ""
          }
          
          for(var i = 0; i < list.value.length; i++) {
            shows.value.push(false)
            console.log(shows.value)
            showlist.value.push(true)
          }

        }
      })

      const shows:any = ref([])
      const showlist:any = ref([])
      const showbtn = ref(false)

      const id = ref()
      const type:any = ref([])
      const name = ref()
      const price = ref()
      const number = ref()
      const money = ref()
      const remarks = ref()

      const keyword = ref()
      const search = () => {
        console.log("111")
        // console.log(keyword.value)

        let postData = qs.stringify({
          name: keyword.value,
        })
        axios.post(`/api/select`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((res) => {

          if (res.status === 200) {
            list.value = res.data
            // console.log("list",list.value)
            if(res.data == "") {
              mess.value = "没有找到相应内容哦！"
            } else {
              mess.value = ""
            }
            
          }
        })
      }

      //绑定input框，实时检测keword是否为空，为空则提示警告
      const update = () => {
        if(keyword.value === "") {
          axios.post(`/api/zhangdanList`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((res) => {

          if (res.status === 200) {
            list.value = res.data
            console.log(list.value)

            if(list.value == "") {
              mess.value = "内容为空"
              if(!store.state.login) {
                mess.value = '请先'
                login.value = true
              }
            } else {
              mess.value = ""
            }
            
            for(var i = 0; i < list.value.length; i++) {
              shows.value.push(false)
              console.log(shows.value)
              showlist.value.push(true)
            }

          }
        })
        }
      }

      const showMore = function(ind:number) {
        shows.value[ind] = true
      }

      const hideShow = function(ind:number) {
        shows.value[ind] = false
      }

      const del = function(ind: number) {
        showlist.value[ind] = false

        let postData = qs.stringify({
          id: list.value[ind].id,
        })
        axios.post(`/api/deleteZhangDan`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((res) => {

            if (res.status === 200) {
              alert(res.data)
              console.log(res)
            }
        })
      }

      const mod = function(ind: number) {
        showbtn.value = true
        id.value = list.value[ind].id
        type.value = list.value[ind].type
        name.value = list.value[ind].name
        price.value = list.value[ind].price
        number.value = list.value[ind].number
        remarks.value = list.value[ind].remarks
      }

      const delay = () => {
        showbtn.value = false
      }

      const sure = () => {
        showbtn.value = false

        let postData = qs.stringify({
          id: id.value,
          icon: "···",
          type: type.value,
          name: name.value,
          price: price.value,
          number: number.value,
          remarks: remarks.value,
        })
        axios.post(`/api/updateZhangDan`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((res) => {

            if (res.status === 200) {
              alert(res.data)
              console.log(res)

              axios.post(`/api/zhangdanList`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((res) => {

                if (res.status === 200) {
                  list.value = res.data
                }
              })
              
            }
        })      

      }

      return {
          list,
          mess,
          login,
          shows,
          showlist,
          showbtn,
          keyword,
          update,

          search,
          showMore,
          hideShow,
          del,
          mod,
          delay,
          sure,

          type,
          name,
          price,
          number,
          money,
          remarks,
      }
    },
})
</script>

<style lang="stylus" scoped>
.act
  color red
.unact
  color #0d6efd
a
  text-decoration none
.read
  width 100%
  height 35rem
  margin-top -50px
  border 1px #ccc solid
  box-shadow 0 0 0.1rem rgba(131, 171, 175, 0.5)
  // background-color red
  .navbar
    width 100%
    // margin-top -50px
    margin-bottom 4rem
    .navbar-brand
      font-size 15px
      b
        color #0d6efd
        font-size 25px
    .navbar-collapse
      margin-left 30px
      a
        text-decoration none
      a:hover 
        color #0d6efd
      .active 
        color #0d6efd
      .form-control 
        height 2.2rem
        width 500px
        margin-left -100px
        // background-color #fff
      button 
        line-height 0rem
        margin-left -1.8%
        font-size 30px
        // font-size 1.5rem
      .form-select
        width 100px
        height 2.2rem
        margin-left 20px
  .main
    padding-top .5rem
    margin-top -4rem
    // background-color red
    ul 
      //padding 0
      border-top 1px #666 solid
      margin-top -.5rem
      li
        list-style none
        margin-left -3%
        line-height 2.5rem
        font-weight 700
        position relative
        border-bottom 1px #eee solid
        // background-color skyblue
        div  
          display inline-block
          width 20%
          //background-color red
        .small
          width 10%
          // background-color skyblue
      .bills
        font-weight 400
        .money
          color red
        span 
          // margin-left 2%
          padding 0px 20px
          position absolute
          // background-color skyblue
          a
            text-decoration none
            font-size 25px
            color #333
            margin-right 100%
            margin-left -38%
          a:hover
            color #0d6efd
      .bills:hover
        background-color #f8f9fa
      p
        width 100%
        color red
        margin-top 10rem
        line-height 2.5rem
        // background-color red
  .mod
    position absolute
    width 40%
    left 30%
    top 20%
    // translate transform(-50%, -50%)
    // height 6rem
    border 1px #ccc solid
    background-color #fff
    box-shadow 0 0 0.1rem rgba(131, 171, 175, 0.5)
    h4
      width 100%
      border-bottom 1px #ccc solid
      background-color #f8f9fa
    p
      height 2.5rem 
      text-align left
      text-indent 23%
      // background-color red
    .btn
      margin-left 10%
      margin-right 6%
      margin-bottom 2rem
</style>
